<template>
  <div>
    <div class="goodsImgList-mokuai">
      <!-- 数据模块 -->
      <div class="goodsImgList-index">
        <div class="goodsImgList-index-top">
          <div class="goodsImgList-name">
            <div class="goodsImgList-name-font">
              <i class="el-icon-search"></i>
              筛选查询
            </div>
            <div class="goodsImg-name-right">
              <el-button @click="onSubmit">查询结果</el-button>
            </div>
            <div class="goodsImg-name-right" @click="packUp">
              <i class="el-icon-arrow-up"></i>
              收起筛选
            </div>
          </div>
          <div class="goodsImg-content">
            <!-- 筛选条件 -->
            <div class="goodsImg-button-select-2" v-if="showPrise">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="操作人员:">
                  <el-select v-model="formInline.operateName" placeholder="请选择" clearable>
                    <el-option v-for="item in opeatePeole" :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="操作日期起:">
                  <div class="block">
                    <el-date-picker v-model="formInline.operateTime" type="date" placeholder="选择日期"></el-date-picker>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据模块 -->
      <div class="goodsImgList-index">
        <div class="goodsImgList-index-top">
          <div class="goodsImgList-name">
            <div class="goodsImgList-name-font">
              <i class="el-icon-s-unfold"></i>
              数据列表
            </div>
            <div class="LperatingLog-index-select">
              <div class="goodsImgList-left goodsImgList-index-select-button">
                <el-button @click="onSubmitImg(listLine)" size="small">确定</el-button>
              </div>
              <div class="goodsImgList-left">
                <el-form :inline="true" :model="listLine" class="demo-form-inline" size="small">
                  <el-form-item label="清除日志:">
                    <el-select v-model="listLine.type" placeholder="选择清除的日期" class="select-width-2">
                      <el-option label="一周之前" value="1"></el-option>
                      <el-option label="一个月之前" value="2"></el-option>
                      <el-option label="三个月之前" value="3"></el-option>
                      <el-option label="一半年之前" value="4"></el-option>
                      <el-option label="一年之前" value="5"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="goodsImgList-content">
            <!-- 数据列表 -->
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="编号" width="100" align="center">
                  <template slot-scope="scope">{{scope.row.id}}</template>
                </el-table-column>
                <el-table-column prop="operateName" label="操作者" width="120" align="center"></el-table-column>
                <el-table-column
                  prop="operateTime"
                  label="操作日期"
                  width="180"
                  align="center"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column prop="ip" label="IP地址" width="180" align="center"></el-table-column>
                <el-table-column prop="operateLog" label="操作记录" align="center"></el-table-column>
              </el-table>
            </div>
            <!-- 页脚 -->
            <div class="goodsImgList-paging">
              <!-- 批量操作 -->
              <div class="goodsImgList-paging-leftlayout">
                <div class="opertation-block">
                  <!-- 全选需要设置方法目前只能操作0，1数据 -->
                  <el-button @click="toggleSelection(tableData)" size="small">全选</el-button>
                </div>
                <div class="opertation-block">
                  <el-form :inline="false" :model="operation" class="demo-form-inline" size="small">
                    <el-form-item label>
                      <el-select
                        v-model="operation.opertationType"
                        placeholder="批量操作"
                        class="select-width-2"
                      >
                        <el-option label="清除" value="1"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="opertation-block">
                  <el-button size="small" @click="deteleOperate(operation)">确定</el-button>
                </div>
              </div>
              <!-- 分页 -->
              <div class="goodsImgList-paging-layout">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style>
/* 筛选框 */
.goodsImg-content {
  width: 100%;
}
.goodsImg-name-right {
  height: 40px;
  line-height: 40px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
}
.goodsImg-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}
.select-width-1 {
  width: 200px;
}
/* 自定义 */
.form-button-center {
  margin-left: 110px;
}
.select-width-2 {
  width: 100px;
}
.goodsImgList-left {
  float: left;
}
.goodsImgList-mokuai {
  height: 1000px;
  background-color: rgb(249, 249, 249);
}
.goodsImgList-index {
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.goodsImgList-index-top {
  margin-top: 30px;
}
.goodsImgList-name {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  background-color: rgb(240, 240, 240);
}
.goodsImgList-name-font {
  height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
  font-size: 14px;
}

.LperatingLog-index-select {
  width: 400px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;
}
.goodsImgList-index-select-button {
  margin-right: 20px;
}
.goodsImgList-content {
  width: 100%;
  padding-top: 40px;
}
.goodsImgList-button-select-2 {
  height: 50px;
  padding-top: 10px;
  padding-left: 20px;
}

.opertation-block {
  display: inline-block;
  margin-left: 3px;
}
.goodsImgList-paging {
  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
.goodsImgList-paging-leftlayout {
  float: left;
  margin-top: 7px;
}
.goodsImgList-paging-layout {
  float: right;
  margin-top: 7px;
}
.custom-class {
  width: 30%;
  margin: auto;
}
</style>

<script>
import operateApi from "@/api/settings/operate";
export default {
  data() {
    return {
      // 操作人员获取
      opeatePeole: [],
      // 是否启用筛选模式
      selectrue: false,

      // 隐藏
      showPrise: true,
      // 筛选1装筛选数据
      formInline: {
        operateName: null,
        operateTime: null
      },
      // 筛选2
      listLine: {
      type:'',
      },

      // 列表数据
      tableData: [],
      operation: {
        opertationType: ""
      },
      // 分页
      pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
      total: 5,
      currentPage1: 1,

      // 存储选择的ids
      multipleSelection:[],
    };
  },
  methods: {
    // 返回
    returnButton() {
      this.$router.replace({ path: "/goods/goodsImage" });
    },
    // 点击显示和隐藏
    packUp: function() {
      this.showPrise = !this.showPrise;
    },

    // 启动筛选
    onSubmit() {
      console.log("获取筛选数据");
      console.log(this.formInline);
      var operateName = this.formInline.operateName;
      var operateTime = this.formInline.operateTime;

      if (operateName != null || operateTime != null) {
        this.selectrue = true;
      } else {
        this.selectrue = false;
      }
      console.log("筛选模式:" + this.selectrue);

      if (this.selectrue == true) {
        this.currentPage1 = 1;
        this.intdataTwo(
          this.currentPage1,
          this.pageSize,
          operateName,
          operateTime
        );
      }else{
this.intdata(this.currentPage1, this.pageSize);
      }
    },
    // 确认删除
    onSubmitImg(form) {
    
operateApi.deleteListByType(form.type).then(response=>{

  this.$message(response.data.message);

  if(response.data.message=="操作失败"){
console.log("失败或没有符合数据");

  };
  
  if(response.data.message=="操作成功"){
 this.$router.go(0);

  }
 
})
  
    },
    // 数据列表
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    // 选择的数据
    handleSelectionChange(val) {
     // 因为此方法是在选择改变时调用，所以必须初始化数组 如果不初始化数组 数组将会层层叠加
      this.multipleSelection = [];
      // 为multipleSelection赋值   multipleSelection为id数组
      val.forEach(v => {
        this.multipleSelection[this.multipleSelection.length] = v.id;
      });
    },
// 批量删除操作
deteleOperate(from){

   
console.log(this.multipleSelection);


 if(from.opertationType==1) {
operateApi.deleteList(this.multipleSelection).then(response=>{


this.$message(response.data.message);

this.$router.go(0);
})

}else{
  this.$message("无效的操作");
}
},

    // 
    handleClick(index, row) {
      this.$router.replace({ path: "/settings/addTemp" });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;

      if (this.selectrue == true) {
        this.intdataTwo(
          this.currentPage1,
          this.pageSize,
          this.formInline.operateName,
          this.formInline.operateTime
        );
      } else {
        this.intdata(this.currentPage1, this.pageSize);
      }
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      if (this.selectrue == true) {
        this.intdataTwo(
          this.currentPage1,
          this.pageSize,
          this.formInline.operateName,
          this.formInline.operateTime
        );
      } else {
        this.intdata(this.currentPage1, this.pageSize);
      }
    },

    // 获取分页查询数据
    intdata(pageNum, pageSize) {
      operateApi.getList(pageNum, pageSize).then(reponse => {
        console.log(reponse);
        this.tableData = reponse.data.data.list;
        this.total = reponse.data.data.total;
      });
    },

    // 获取筛选后分页查询数据
    intdataTwo(pageNum, pageSize, operateName, operateTime) {
      // 转化时间
      var time =  this. parseTime(operateTime);
      console.log(time);
      // 
      operateApi
        .getListBySelect(pageNum, pageSize, operateName, time)
        .then(reponse => {
          console.log(reponse);
          this.tableData = reponse.data.data.list;
          this.total = reponse.data.data.total;
          //  this.tableData.push(reponse.data.data.list);
        });
    },

    // 获取操作员名单
    getoperate() {
      operateApi.ListAll().then(response => {
        console.log(response);
        this.opeatePeole = [];
        response.data.data.forEach(v => {
          var ss = true;
          if (this.opeatePeole.length > 0) {
            this.opeatePeole.forEach(item => {
              if (item == v.operateName) {
                ss = false;
              }
            });
          }

          if (ss == true) {
            this.opeatePeole[this.opeatePeole.length] = v.operateName;
          }
        });
        console.log(this.opeatePeole);
      });
    },
    // 时间转化
    parseTime(str) {
      if ((str + "").indexOf("-") != -1) {
        str = str.replace(new RegExp(/-/gm), "/");
      }

      let d = new Date(str);

      let newDateYear = d.getFullYear();

      let newDateMonth =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;

      let newDateDay =
        d.getDate() + "" < 10 ? "0" + d.getDate() + "" : d.getDate() + "";

      return newDateYear + "-" + newDateMonth + "-" + newDateDay;
    }
  },

  mounted() {
    this.intdata(this.currentPage1, this.pageSize);
    this.getoperate();
  }
};
</script>